<template>
  <div style="margin-top:30px">
    <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="仓库编码" style="margin-right:15px"  label-width="120px" prop="serialNumber">
              <el-input v-model="form.serialNumber" :disabled="true" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="仓库名称" style="margin-right:15px"  label-width="120px" prop="name">
              <el-input v-model="form.name"  :disabled="true" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="仓库类型" style="margin-right:15px"   label-width="120px" prop="type">
              <el-select v-model="form.type" placeholder="请选择仓库类型" style="width:100%" :disabled="true">
                <el-option
                  v-for="state in warehouseTypeOptions"
                  :key="state.key"
                  :value="state.key"
                  :label="state.display_name"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <el-form-item label="启用库位管理" style="margin-right:15px"  label-width="120px">

            <div class="grid-content bg-purple">
              <el-checkbox disabled label="" v-model="form.locationManagement"></el-checkbox>
            </div>
          </el-form-item>

        </el-col>

      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="联系人" style="margin-right:15px"  label-width="120px">
              <el-input v-model="form.contacts"  :disabled="true" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="联系电话" style="margin-right:15px"  label-width="120px">
              <el-input v-model="form.landlineNumber"  :disabled="true" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="手机号" style="margin-right:15px"  label-width="120px">
              <el-input v-model="form.phoneNumber"  :disabled="true" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="传真" style="margin-right:15px"  label-width="120px">
              <el-input v-model="form.fax"  :disabled="true" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="邮箱" style="margin-right:15px"  label-width="120px">
              <el-input v-model="form.email"  :disabled="true" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="X坐标" style="margin-right:15px"  label-width="120px">
              <el-input v-model="form.longitude"  :disabled="true" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item  label="Y坐标"  style="margin-right:15px"  label-width="120px">
              <el-input v-model="form.latitude"  :disabled="true" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>

      </el-row>



      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="所在区域" style="margin-right:15px"  label-width="120px">
              <el-input v-model="form.area"  :disabled="true" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="详细地址" style="margin-right:15px"  label-width="120px">
              <el-input v-model="form.address"  :disabled="true" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="备注" style="margin-right:15px"  label-width="120px">
              <el-input v-model="form.remarks"  :disabled="true" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
  import Vue from 'vue'
  import 'xe-utils'
  import VXETable from 'vxe-table'
  import 'vxe-table/lib/index.css'
  import {warehouseDetail} from '@/api/basicInfo'

  Vue.use(VXETable)
  export default {
    props:{
      operationCode:{
        type: String,
        require: true
      }
    },
    name: 'Child',
    data() {
      return {
          warehouseTypeOptions : [
              {
                key:"1",display_name:"生产仓"
              },
              {
                  key:"2",display_name:"原料仓"
              },
              {
                  key:"3",display_name:"成品仓"
              },
              {
                  key:"4",display_name:"普通仓"
              }
          ],

        form: {
          address: '',        //地址
          area: '',        //地址
          city: '',           //市
          code: '',           //数据标识
          contacts: '',       //联系人
          country: '',        //国家
          county: '',         //县/区
          email: '',          //邮箱
          fax: '',            //传真
          groupCode: '',      //所属组织
          landlineNumber: '', //联系人号码
          latitude: '',       //维度
          longitude: '',      //经度
          locationManagement:'',

          name: '',           //仓库名称
          phoneNumber: '',    //手机号码
          province: '',       //省
          remarks: '',        //备注
          serialNumber: '',   //仓库代码
          status: '',         //状态
          type: '',           //仓库类型
        },
      }
    },
    created() {
      this.getInfo()
    },
    methods: {
      // 获取页面信息
      getInfo() {
        warehouseDetail(this.operationCode).then(response => {
          this.form = response.data
          for(let key in this.form ){
            if(this.form[key] === 0){
              this.form[key] = false
            }
            if(this.form[key] === 1){
              this.form[key] = true
            }
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin-top: 50px;
  }
</style>
